<template>
  <div id="back-id" class="back-page" @click="handBack">返回</div>
</template>

<script>
import { onMounted } from 'vue';
import { useMove } from '@/hooks/utils';
import { useRouter, useRoute } from 'vue-router';
export default {
  components: {},
  setup() {
    onMounted(() => {
      const el = document.getElementById('back-id');
      useMove(el);
    });

    const router = useRouter();
    const route = useRoute();

    const handBack = (e) => {
      e.stopPropagation();
      e.preventDefault();

      if (route.query.entry) {
        router.push('/home');
      } else {
        router.back();
      }
    };
    return {
      handBack
    };
  }
};
</script>

<style lang="scss" scoped>
.back-page {
  width: 90px;
  height: 90px;
  z-index: 999;
  border-radius: 100%;
  background: rgba(#20beb6, 0.9);
  color: white;
  border: 2px solid #fff;
  text-align: center;
  line-height: 88px;
  font-size: 28px;
  position: fixed;
  bottom: 340px;
  right: 20px;
}
</style>
